<template>
  <div class="tech-panel">
    <!-- 状态区 -->
    <section class="section status-section">
      <div class="status-left">
        <div class="status-item">
          ⚙️ 通讯状态：
          <span :class="['status-value', getCommStatusClass]">{{
            act.PD_101.communication_status == 1 ? "正常" : "断开"
          }}</span>
        </div>
        <div class="status-item">
          ⚙️ 运行状态：
          <span :class="['status-value', getRunStatusClass]">{{
            NamePD_101_GEN("RUNSts_DI").value== true ? "运行" : "停止"
          }}</span>
        </div>
      </div>
      <div class="status-right">
        <div class="status-line">
          皮带速度：<span class="value">{{ beltSpeed }} m/s</span>
        </div>
        
        <div class="status-line">
          速度设定：
          <input
            type="number"
            v-model.number="multiSpeedInputTemp"
            class="input"
            min="0"
            step="1"
            @input="showConfirmDialog = true"
          />
          <span class="unit"> %</span>
        </div>

        <!-- 确认弹窗 -->
        <!-- 科技感确认弹窗 -->
        <!-- 弹窗和遮罩 -->
        <transition name="fade">
          <div v-if="showConfirmDialog" class="dialog-overlay">
            <div class="dialog-box" @click.stop>
              <h3>确认修改</h3>
              <p>
                确定将速度设置为
                <strong>{{ multiSpeedInputTemp }}</strong> 级吗？
              </p>
              <div class="dialog-actions">
                <button class="btn btn-confirm" @click="confirmValue">
                  确认
                </button>
                <button class="btn btn-cancel" @click="cancelInput">
                  取消
                </button>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </section>

    <!-- 华宁控制方式 -->
    <section class="section mode-section">
      <div class="section-title">华宁控制方式</div>
      <div class="mode-buttons">
        <div
          v-for="item in ['集控', '就地', '检修']"
          :key="item"
          :class="[
            'mode-btn',
            huaningControlStatus[item] ? 'active' : 'inactive',
          ]"
        >
          {{ item }}
        </div>
      </div>
    </section>

    <!-- 皮带控制方式 -->
    <section class="section mode-section">
      <div class="section-title">皮带控制方式</div>
      <div class="mode-buttons">
        <div
          v-for="item in ['就地', '远程','闭锁']"
          :key="item"
          :class="['mode-btn', beltControlStatus[item] ? 'active' : 'inactive']"
        >
          {{ item }}
        </div>
      </div>
    </section>
    <!-- 联锁控制状态 -->
    <section class="section lock-switch-section">
      <div class="lock-switch-left">
        <div class="lock-item">
          当前状态：
          <span
            :class="['status-dot', lockStatus === true ? 'grey' : 'green']"
          ></span>
          <span class="lock-text">{{
            lockStatus === true ? "解锁" : "联锁"
          }}</span>
        </div>
      </div>
      <div class="lock-switch-right">
        <button
          class="glow-btn small"
          @click="openConfirmDialog(change, '确定切换联锁/解锁状态设备？')"
        >
          {{ lockStatus === true ? "切换至联锁" : "切换至解锁" }}
        </button>
      </div>
    </section>
    <!-- 操作按钮 -->
    <section class="section button-section">
      <button
        class="glow-btn"
        @click="openConfirmDialog(start, '确定启动设备？')"
      >
        启动
      </button>
      <button
        class="glow-btn"
        @click="openConfirmDialog(stop, '确定停止设备？')"
      >
        停止
    </button>
      <button
        class="glow-btn danger"
        @click="openConfirmDialog(reset, '确定复位故障？')"
      >
        故障复位
      </button>
    </section>
    <transition name="fade">
      <div v-if="showActionConfirm" class="dialog-overlay">
        <div class="dialog-box" @click.stop>
          <h3>确认操作</h3>
          <p>{{ actionDescription }}</p>
          <div class="dialog-actions">
            <button class="btn btn-confirm" @click="confirmAction">确认</button>
            <button class="btn btn-cancel" @click="cancelAction">取消</button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { act, sendDataFromButton } from "../../../utils/websocket";
import { NamePD_101_GEN } from "../../../utils/beltPositioningMethod";
import { operator } from "@/utils/op_enums";

// 通讯状态
const getCommStatusClass = computed(() => (act.PD_101.communication_status === 1 ? "green" : "red"));

const getRunStatusClass = computed(() => (NamePD_101_GEN("BeltRunSts_DI").value === true ? "green" : "gray"));

// 数值状态
const beltSpeed = computed(() => NamePD_101_GEN("BeltSpeed_AI", operator.Divide,1000,2).value);

const multiSpeedInput = computed({
  get: () => NamePD_101_GEN("CtrlSpeedSet_101Belt_AO").value,
  set: (val) => {
    // act.speed = Math.round(val);
    let tag="act.PD_101.PD_101_GEN.CtrlSpeedSet_101Belt_AO"
    sendDataFromButton(tag,Math.round(val))
    //需要增加控制点逻辑
  },
});
const multiSpeedInputTemp = ref(NamePD_101_GEN("CtrlSpeedSet_101Belt_AO").value);
const showConfirmDialog = ref(false);

const confirmValue = () => {
  multiSpeedInput.value = multiSpeedInputTemp.value;
  showConfirmDialog.value = false;
};
const cancelInput = () => {
  multiSpeedInputTemp.value = multiSpeedInput.value;
  showConfirmDialog.value = false;
};

// 控制方式状态
const huaningControlStatus = computed(() => ({
  集控:  NamePD_101_GEN("HNModeRemote_101Belt_AO").value === 0,
  就地:  NamePD_101_GEN("HNModeRemote_101Belt_AO").value === 1,
  检修:  NamePD_101_GEN("HNModeRemote_101Belt_AO").value === 2,
}));
const beltControlStatus = computed(() => ({

  就地: NamePD_101_GEN("ModeLocal_101Belt_DO").value === true,
  远程: NamePD_101_GEN("ModeRemote_101Belt_DO").value === true,
  闭锁: NamePD_101_GEN("ModeLock_101Belt_DO").value === true,

}));

// 实际操作函数
const lockStatus = computed(() => NamePD_101_GEN("CtrlUnlock_101Belt_DO").value);

const change = () => {
  const tag = "act.PD_101.PD_101_GEN.CtrlUnlock_101Belt_DO";
  if(lockStatus.value){
    console.log(lockStatus.value,"+++",tag,false)
    sendDataFromButton(tag, false);
  }else{
    console.log(lockStatus.value,"+++",tag,true)
    sendDataFromButton(tag, true);
  }
};
const start = () => {
  const tag = "act.PD_101.PD_101_GEN.CtrlStart_101Belt_DO";
  sendDataFromButton(tag, true);
};
const stop = () => {
  const tag = "act.PD_101.PD_101_GEN.CtrlStop_101Belt_DO";
  sendDataFromButton(tag, true);
};
const reset = () => {
  const tag = "act.PD_101.PD_101_GEN.CtrlReset_101Belt_DO";
  sendDataFromButton(tag, true);
};
// 通用确认弹窗逻辑
const showActionConfirm = ref(false);
const pendingAction = ref<null | (() => void)>(null);
const actionDescription = ref("");

const openConfirmDialog = (action: () => void, description: string) => {
  pendingAction.value = action;
  actionDescription.value = description;
  showActionConfirm.value = true;
};

const confirmAction = () => {
  pendingAction.value?.();
  showActionConfirm.value = false;
};
const cancelAction = () => {
  showActionConfirm.value = false;
  pendingAction.value = null;
};
</script>

<style scoped>
.tech-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  padding: 2em;
  background: rgba(0, 10, 20, 0.6);
  border: 2px solid #0ff;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  color: #0ff;
  font-family: "Orbitron", "Arial", sans-serif;
  box-shadow: 0 0 12px #0ff4;
}

.section {
  border: 1px solid #0ff4;
  border-radius: 12px;
  padding: 1em 1.5em;
  background: rgba(0, 20, 40, 0.3);
  box-shadow: inset 0 0 10px #0ff2;
}

/* 状态区 */
.status-section {
  display: flex;
  justify-content: space-between;
  gap: 2em;
}
.status-left {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.status-item {
  white-space: nowrap;
  font-weight: bold;
  font-size: 1em;
}
.status-right {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.status-line {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.input {
  background: transparent;
  border: 1px solid #0ff;
  color: #0ff;
  padding: 0.3em 0.5em;
  border-radius: 6px;
  width: 80px;
}
.unit {
  color: #999;
}
.status-value.green {
  color: #0f0;
}
.status-value.red {
  color: #f33;
}
.status-value.gray {
  color: #999;
}

/* 控制方式显示 */
.mode-buttons {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  margin-top: 0.5em;
}
.mode-btn {
  padding: 0.5em 1.2em;
  border-radius: 8px;
  font-weight: bold;
  min-width: 70px;
  text-align: center;
  transition: all 0.3s;
}
.mode-btn.active {
  background-color: rgba(0, 255, 170, 0.2);
  border: 1px solid #0ff;
  color: #0ff;
}
.mode-btn.inactive {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid #555;
  color: #888;
}

/* 操作按钮 */
.button-section {
  display: flex;
  gap: 1em;
  justify-content: center;
}
.glow-btn {
  padding: 0.7em 1.5em;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid #0ff;
  color: #0ff;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 8px #0ff4;
  transition: all 0.2s;
}
.glow-btn:hover {
  background: #0ff;
  color: #000;
  box-shadow: 0 0 16px #0ff;
}
.glow-btn.danger {
  border-color: #f00;
  color: #f00;
}
.glow-btn.danger:hover {
  background: #f00;
  color: #000;
  box-shadow: 0 0 16px #f00;
}

/*弹窗*/
/* 遮罩去除阻断点击 */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: transparent; /* 去掉半透明背景 */
  pointer-events: none; /* 让遮罩不阻挡事件 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* 弹窗盒子能响应事件 */
.dialog-box {
  background: rgba(0, 40, 70, 0.95);
  padding: 2rem 2.5rem;
  border-radius: 12px;
  /* 去掉阴影 */
  /* box-shadow: none; */
  width: 320px;
  color: #0ff;
  font-family: "Orbitron", sans-serif;
  text-align: center;
  user-select: none;
  pointer-events: auto;
}

/* 其余样式保持不变 */

/* 标题 */
.dialog-box h3 {
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.5rem;
  text-shadow: 0 0 10px #0ff;
}

/* 文字 */
.dialog-box p {
  margin-bottom: 1.8rem;
  font-size: 1.15rem;
  line-height: 1.4;
}

/* 按钮容器 */
.dialog-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* 按钮基础样式 */
.btn {
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
  user-select: none;
}

/* 确认按钮 */
.btn-confirm {
  background: #00ffcc;
  color: #003322;
  border-color: #00ffcc;
  box-shadow: 0 0 12px #00ffcc;
}

.btn-confirm:hover {
  background: #00d6a6;
  border-color: #00d6a6;
  box-shadow: 0 0 18px #00d6a6;
  color: #001f15;
}

/* 取消按钮 */
.btn-cancel {
  background: transparent;
  color: #0ff;
  border: 2px solid #0ff;
  box-shadow: 0 0 8px #0ff6;
}

.btn-cancel:hover {
  background: #0ff;
  color: #003333;
  box-shadow: 0 0 20px #0ff;
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 联锁切换区 */
.lock-switch-section {
  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  padding: 1em 1.5em;
  border: 1px solid #0ff4;
  border-radius: 12px;
  background: rgba(0, 20, 40, 0.3);
  box-shadow: inset 0 0 10px #0ff2;
}

.lock-switch-left {
  color: #0ff;
  display: flex;
  align-items: center;
  gap: 1em;
}

.lock-item {
  
  font-weight: bold;
  font-size: 1em;
  white-space: nowrap;
}

.lock-text {
  margin-left: 0.5em;
}

.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 0.5em;
  box-shadow: 0 0 6px currentColor;
}

.status-dot.green {
  background-color: #0f0;
  color: #0f0;
}

.status-dot.grey {
  background-color: rgb(111, 134, 141);
  color: rgb(85, 131, 140);
}
</style>
